<template>
	<view>
		<view>
			<view class="leaveNav">
				<view style="margin-left:60upx;font-weight: 800;font-size: 46rpx;">请假修改
					<view class="leaveLine"></view>
				</view>
				<button class="leaveBtn" @click="updateStuLeaves()">提交</button>
			</view>
			<view class="leaveMgm">
				<view style="color:#8F8F94;margin-bottom:20rpx;font-weight: 800;font-size: 42rpx;">
					学员基本信息
				</view>
				<view style="color:#8F8F94;margin-bottom:20rpx;">
					姓名：{{studentName}}
					<!-- <view style="position: absolute;top:0rpx;right:0rpx">
						<image style="width:180rpx;height:230rpx"  :src="displayArr.img"></image>
					</view> -->

				</view>
				<!-- <view style="color:#8F8F94;margin-bottom:20rpx;">
					性别：{{sex}} 
				</view> -->
				<view style="color:#8F8F94;margin-bottom:20rpx;">
					班级：{{className}}
				</view>
				<view style="color:#8F8F94;margin-bottom:20rpx;">
					班主任：{{loginName}}
				</view>
				<view class="stuLine"></view>
				<view class="timePos">
					<!-- <view class="uni-title uni-common-pl" >选择请假时间</view> -->
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left"
								style="letter-spacing: 8rpx;; display: flex;justify-content: space-around;color: #0000FF;font-size: 38rpx;font-weight: 800;">
								<span>开始时间</span>
								<span style="margin-left:40rpx">结束时间</span>
							</view>
							<view class="uni-list-cell-left"
								style="display: flex;justify-content: space-around;margin-top:10rpx;margin-left:0rpx;">
								<picker mode="date" :value="startDateLev" :start="startDate" :end="endDate"
									@change="bindStartDateChange($event)">
									<view class="uni-input">{{startDateLev}}</view>
								</picker>
								<view style="margin-left:20rpx"></view>
								<picker mode="date" :value="endDateLev" :start="startDate" :end="endDate"
									@change="bindEndDateChange($event,endDateLev)">
									<view class="uni-input">{{endDateLev}}</view>
								</picker>
							</view>
							<view style="margin:20rpx 0;" class="stuLine"></view>
						</view>
					</view>
				</view>

			</view>
			<view style="color:#8F8F94;margin:30rpx 110rpx;font-size: 38rpx;">修改事由*</view>
			<textarea class="repText" v-model="leaveDesc" placeholder="备注消息"></textarea>
		</view>
		<!-- <my-bottom :topName="topName"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default {
		name: 'leaveManagement',
		data() {
			return {
				loginName: '',
				leaveDesc: '',
				leaveDays: 0,
				leaveId: [],
				startDateLev: '',
				endDateLev: '',
				userName: '',
				studentName: '',
				className: '',
				sex: '',
				id: '',
				endDateArray: [],
				startDateArray: [],
				studentNameArray: [],
				leaveDaysArray: [],
				phoneArray: [],
				studentNoArray: [],
				topName: "历史请假记录",
				currentTime: '',

			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.loginName = res.data
					that.userName = res.data
				}
			})
		},
		onLoad(options) {
			this.userName = uni.getStorageSync("userName")
			this.endDateLev = options.endDate
			this.startDateLev = options.startDate
			this.studentName = options.studentName
			this.className = options.className
			this.id = options.id
		},
		mounted() {
			// this.getClassStuListByCName()
			this.currentTime = this.endDateLev
		},
		components: {
			topCom,
			bottomCom,

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// id,updateDesc,startDate,endDate
			updateStuLeaves() {
				console.log(this.leaveDesc)
				if (this.leaveDesc == '') {
					uni.showToast({
						title: "修改事由必填",
						icon: "none"
					})
					return;
				}
				this.$api.teacher.updateStuLeaves(parseInt(this.id), this.leaveDesc, this.startDateLev, this.endDateLev)
					.then(res => {
						uni.navigateTo({
							url: "/pages/leave/leaveHistoryList"
						})
					})
			},
			bindStartDateChange: function(e) {
				uni.showToast({
					title: "当前时间不能更改",
					icon: "none"
				})
				return
				// this.startDateLev = e.target.value
				// this.$forceUpdate()
			},
			bindEndDateChange: function(e, endDateLev) {
				this.endDateLev = e.target.value
				var endTime = new Date(Date.parse(this.endDateLev.replace(/-/g, "/")))
				var startTime = new Date(Date.parse(this.$date.replace(/-/g, "/")))
				// console.log(endTime>=startTime,endDateLev>=this.$date)
				if (endTime >= startTime) {
					this.endDateLev = e.target.value
					this.$forceUpdate()
					// leaveDays = parseInt(Math.abs(endTime.getTime() -  startTime.getTime())/1000/60/60/24)+1

				} else {
					this.endDateLev = this.currentTime
					uni.showToast({
						title: '结束时间不能小于当前时间',
						icon: "none"
					})

				}
			},

			// classId,className,endDateArray,startDateArray,studentNameArray,leaveDays,phoneArray,studentNoArray
			createUpdateStuLeaves() {
				this.$api.teacher.createUpdateStuLeaves(this.classId, this.className, this.endDateArray,
					this.startDateArray, this.studentNameArray, this.leaveDaysArray, this.phoneArray, this
					.studentNoArray, this.leaveId).then(res => {
					uni.showToast({
						title: '请假提交成功'
					})
					this.getClassStuListByCName()
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			displayDate(item) {
				this.$forceUpdate()
				item.isShow = !item.isShow
				for (let var1 in item.start) {
					if (item.endDate[var1].date != '' && item.startDate[var1].date != '') {
						item.num = item.endDate[var1].date - item.startDate[var1].date
					}
				}
			},
			getClassStuListByCName() {
				this.$api.teacher.getClassStuListByCName(this.className).then(res => {
					this.leaveArr = res.data
					this.leaveArr.forEach((item, index) => {
						item.isShow = false
						if (item.endDate != null && item.startDate != null) {
							var endTime = new Date(Date.parse(item.endDate.replace(/-/g, "/")))
							var startTime = new Date(Date.parse(item.startDate.replace(/-/g, "/")))
							item.leaveDays = parseInt(Math.abs(endTime.getTime() - startTime.getTime()) /
								1000 / 60 / 60 / 24) + 1
							item.startDateLev = item.startDate
							item.endDateLev = item.endDate
							return;
						} else {
							item.leaveDays = 0
						}

						item.startDateLev = 2022
						item.endDateLev = 2022
					})
				})
			},
			slectCk() {

			},
			// 提交数据
			leaveBtnFun() {
				this.leaveArr.forEach((item, index) => {
					var lId = 0
					if (item.leaveDays > 0) {
						this.startDateArray.push(item.startDateLev)
						this.endDateArray.push(item.endDateLev)
						this.leaveDaysArray.push(parseInt(item.leaveDays))
						this.phoneArray.push(item.phone)
						this.studentNoArray.push(item.studentNo)
						this.studentNameArray.push(item.studentName)
						if (item.leaveId) {
							this.leaveId.push(item.leaveId)
						} else {
							this.leaveId.push(lId)
						}

					}

				})
				this.createUpdateStuLeaves()

			},
			// endDate,leaveId,startDate,studentNo
			delFun(item) {
				const data = this.$qs.stringify({
					leaveId: item.leaveId,
					studentNo: item.studentNo,
					startDate: item.startDate,
					endDate: item.endDate,
				});
				if (item.leaveDays != 0) {
					this.$http.post(`StudentLeave/deleteStuLeaves`, data).then(res => {
						uni.showToast({
							title: '取消请假成功'
						})
						this.getClassStuListByCName()
					})
				} else {

				}

				// this.$api.teacher.deleteStuLeaves(this.$qs.stringify(item.endDate),item.leaveId,this.$qs.stringify(item.startDate),this.$qs.stringify(item.studentNo)).then()
			},
			CancelFun(item) {
				this.$forceUpdate()
				item.leaveDays = 0
				item.startDateLev = 0
				item.endDateLev = 0
			}
		}
	}
</script>

<style>
	.repText {
		border: solid 1rpx #999999;
		border-radius: 20rpx;
		width: 490rpx;
		height: 150rpx;
		margin-left: 100rpx;
		padding: 10rpx;

	}

	.stuLine {
		width: 500rpx;
		height: 3rpx;
		background: #C0C0C0;
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: 0rpx;
	}

	.delSty {
		height: 40rpx;
		background-color: red;
		padding: 0 2rpx;
		color: white;
		border: red solid 1rpx;
		border-radius: 10rpx;
	}

	.delCancel {
		height: 40rpx;
		background-color: #C0C0C0;
		padding: 0 2rpx;
		color: white;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
	}

	.isSlect {
		color: red;
	}

	.dateTimeNav {
		display: flex;
		justify-content: space-around;
		align-content: space-between
	}

	.dateTimeNavTitle {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		width: 400rpx;
	}

	.dateTimeNavTitleInput {
		display: inline-block;
	}

	.timePos {

		margin-top: 40rpx;
	}

	.fontLeave {
		display: flex;
		justify-content: flex-end;
		align-content: center;
	}

	.checkbox {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}

	.leaveNum {
		width: 30rpx;
		height: 50rpx;
		border: #cccc solid 1rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220rpx;
		height: 70rpx;
		color: white;
		font-size: 38rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.leaveLine {
		width: 260rpx;
		height: 8rpx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -40rpx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 38rpx;
		margin: auto;

		width: 500rpx;
	}

	.leaveCheck {
		/* margin-left:60upx; */
		margin-bottom: 30upx;

	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>